<template>
  <div class="fee-summary-main">
    <div class="fee-summary-content">
      <template v-if="feeTreeStData.length > 0">
        <div class="fee-item" v-for="(item, index) in feeTreeStData" :key="index">
          <div class="fee-item-field flex justify-between" :class="[item.childrenToggle ? 'children-show' : '']">
            <div
              class="fee-name"
              :class="[item.children ? 'fee-name-toggle' : '']"
              @click="() => (item.children ? (item.childrenToggle = !item.childrenToggle) : '')"
            >
              {{ item.name }}
              <component
                class="fee-name-toggle-icon"
                v-if="item.children"
                :is="item.childrenToggle ? 'icon-caret-up' : 'icon-caret-down'"
              />
            </div>
            <div class="fee-value">{{ unitVal(item.value) }}</div>
          </div>
          <div class="fee-item-children mb-4" v-if="item.children && item.childrenToggle">
            <div
              class="fee-item-field flex"
              :class="childItem.children?.length > 0 ? 'flex-col' : 'justify-between'"
              v-for="(childItem, childIndex) in item.children"
              :key="childIndex"
            >
              <div class="fee-name">{{ childItem.name }}</div>
              <template v-if="childItem.children?.length > 0">
                <div class="fee-value">
                  <div class="fee-item-children-2">
                    <div class="fee-item-field flex justify-between" v-for="(subItem, subIndex) in childItem.children" :key="subIndex">
                      <div class="fee-name">{{ subItem.name }}</div>
                      <div class="fee-value">{{ unitVal(subItem.value) }}</div>
                    </div>
                  </div>
                </div>
              </template>
              <div v-else class="fee-value">{{ unitVal(childItem.value) }}</div>
            </div>
          </div>
          <a-divider v-if="index < feeTreeStData.length - 1" style="margin: 0" />
        </div>
      </template>
      <template v-else>
        <a-empty style="margin-top: 80px" description="暂无费用信息" />
      </template>
    </div>
    <a-divider style="margin: 0" />
    <div class="fee-summary-footer flex justify-between">
      <div class="footer-text">费用合计</div>
      <div class="footer-value">{{ unitVal(sumFee) }}</div>
    </div>
  </div>
  <div class="fee-deposit-main">
    <template v-if="carDepositList">
      <a-divider style="margin: 0" />
      <div class="fee-header">{{ carDepositList.feeName }}</div>
      <div class="fee-deposit-footer flex justify-between" v-for="item in carDepositList.childrenList">
        <div class="fee-name">{{ formatAmount(item.itemName) }}</div>
        <div class="fee-value">{{ unitVal(item.amount) }}</div>
      </div>
    </template>
  </div>
</template>
<script setup>
  const props = defineProps({
    feeForm: Object,
  })
  import { ref, computed, watch } from 'vue'
  import { decimalAddition, unitVal } from '@/utils'
  import { buildTreeData, processTreeData } from './fee-statistic.js'
  let orderFee = ref({})
  const formatAmount = (itemName) => {
    let suffix = ''
    const feeType = orderFee.value[0].feeType
    // 1-渠道  2-线下
    // 判断费用类型是否是租车押金或违章押金
    if (itemName === '租车押金' || itemName === '违章押金') {
      if (feeType === 2) {
        suffix = '（网络平台代收）'
      } else if (feeType === 1) {
        if (itemName === '租车押金') {
          suffix = '（用户交车前需缴纳的押金金额）'
        } else if (itemName === '违章押金') {
          suffix = '（用户还车后从租车押金中转）'
        }
      }
    }
    return itemName + suffix
  }
  // 实时费用信息开始
  let carDepositList = ref([])
  const feeRealtimeTreeData = computed(() => {
    orderFee.value = props.feeForm.orderFee
    if (orderFee.value) {
      // 押金费用统计是否展示
      carDepositList.value = orderFee.value[0].feeDetailList.find((item) => item.type === 'depositFee') || null
      return buildTreeData(orderFee.value)
    }
    return []
  })
  // 此处 feeTreeStData 为一个 “ 常量 ”，并未直接将 feeTreeStData 逻辑放到 feeRealtimeTreeData computed 逻辑中
  // 原因是由于费用名字点击展开收起无法操纵 computed 出来的数据，不生效？（存疑）
  const feeTreeStData = ref([])
  watch(
    () => feeRealtimeTreeData.value,
    (newVal) => {
      feeTreeStData.value = processTreeData(newVal, feeTreeStData)
      console.log('feeTreeStData', feeTreeStData.value)
    },
    { immediate: true, deep: true }
  )
  // 实时费用信息结束

  // 费用合计
  const sumFee = computed(() => {
    let sum = 0
    feeTreeStData.value.forEach((item) => {
      if (item.children?.length > 0) {
        item.children.forEach((childItem) => {
          if (childItem.children?.length > 0) {
            childItem.children.forEach((subItem) => {
              sum = decimalAddition(sum, subItem.value)
            })
          } else {
            sum = decimalAddition(sum, childItem.value)
          }
        })
      } else {
        sum = decimalAddition(sum, item.value)
      }
    })
    return sum
  })
</script>
<style lang="less" scoped>
  .fee-summary-main {
    padding: 0 12px;
    border: 1px solid #f2f3f5;
    position: relative;
    z-index: 1;
    .fee-summary-content {
      .fee-item {
        .fee-item-field {
          min-height: 52px;
          line-height: 52px;
          &.children-show {
            height: 46px;
          }
          .fee-name-toggle {
            cursor: pointer;
            .fee-name-toggle-icon {
              margin-left: 2px;
            }
          }
        }
        .fee-item-children,
        .fee-item-children-2 {
          background: rgba(247, 248, 250, 0.5);
          padding: 16px;
          .fee-item-field {
            min-height: 20px;
            line-height: 20px;
          }
          .fee-item-field + .fee-item-field {
            margin-top: 12px;
          }
        }
      }
    }
  }

  .fee-summary-footer {
    height: 52px;
    line-height: 52px;
    .footer-text {
      font-size: 14px;
      font-weight: 600;
      color: #1d2129;
    }
    .footer-value {
      font-size: 14px;
      font-weight: 600;
      color: rgb(var(--primary-6));
    }
  }
  .fee-deposit-main {
    border: 1px solid #f2f3f5;
    margin-top: 20px;
    .fee-header {
      background: #f2f3f5;
      height: 40px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 600;
      font-size: 14px;
      color: #1d2129;
      line-height: 40px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 0 12px;
    }
    .fee-deposit-footer {
      margin: 0 16px;
      border-bottom: 1px solid #f2f3f5;
      .fee-name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1d2129;
        line-height: 52px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .fee-value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #1d2129;
        line-height: 52px;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
    }
  }
</style>
